<script setup>
import { ref } from 'vue'
import { validateUsername, validatePassword } from '../Login/validate'
import SvgIcon from '../../components/SvgIcon.vue'
import { useStore } from 'vuex'
import router from '@/router'
const store = useStore()
import { postRegister } from '@/api/sys'
import {
  Form as VeeForm,
  Field as VeeField,
  ErrorMessage as VeeErrorMessage
} from 'vee-validate'
import md5 from 'md5'
const registerData = ref({
  username: '晓丹',
  password: '123456'
})
const onSubmit = async () => {
  const res = await postRegister({
    ...registerData.value,
    password: md5(registerData.value.password)
  })
  if (res === null) {
    //todo
    // 注册成功提示
  }
}
</script>
<template>
  <div class="container md:bg-slate-100 md:h-screen md:pt-14">
    <div
      class="content pt-12 px-4 md:w-3/12 md:mx-auto md:bg-white md:rounded-md"
    >
      <!-- 图标 -->
      <div class="logo mx-auto">
        <img
          src="https://res.lgdsunday.club/my-avatar.jpg"
          alt=""
          class="h-16 mx-auto md:hidden"
        />
        <h3 class="hidden md:block text-red-500 text-center font-bold">
          注册账号
        </h3>
      </div>
      <vee-form @submit="onSubmit">
        <!-- 用户名 -->
        <div class="border-slate-300 border-b border-b-slate-300">
          <vee-field
            name="username"
            :rules="validateUsername"
            v-model="registerData.username"
          >
          </vee-field>
        </div>
        <vee-error-message
          name="username"
          class="text-sm text-red-600 block mt-0.5 text-left"
        ></vee-error-message>

        <!-- 密码 -->
        <div class="border-slate-300 border-b border-b-slate-300">
          <vee-field
            name="password"
            :rules="validatePassword"
            v-model="registerData.password"
          >
          </vee-field>
        </div>
        <vee-error-message
          name="password"
          class="text-sm text-red-600 block mt-0.5 text-left"
        ></vee-error-message>

        <button
          type="submit"
          class="clear-both bg-red-500 rounded-md text-slate-200 text-xl text-center p-2 mb-16 mt-16 block w-full mx-auto"
        >
          注册
        </button>
      </vee-form>
      <!-- 返回首页 -->
      <div class="mt-4">
        <button
          class="bg-blue-500 text-white rounded-md px-4 py-2"
          @click="router.push('/')"
        >
          返回首页
        </button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
